<template>
  <div class="register spage">
    <myhead :back="true" title="立即注册"></myhead>
    <van-form @submit="onSubmit" ref="form" @failed="checkFail">
      <van-field
        v-model="form.phone"
        name="phone"
        label="手机号码"
        placeholder="手机号码"
        :rules="[
          { required: true, message: '请填写手机号码' },
          {
            pattern:reg.phone,
            message:'请输入有效的手机号码',
          }
        ]"
      />
       <van-field
        v-model="form.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="form.email"
        name="email"
        label="邮箱"
        placeholder="邮箱"
        :rules="[
          { required: true, message: '请填写邮箱' },
          { pattern:reg.email,message:'请输入有效的邮箱'}
        ]"
      />
       <van-field
        v-model="form.password"
        :type="type"
        name="password"
        label="密码"
        placeholder="密码"
        :right-icon="type=='password'?'eye':'eye-o'"
        @click-right-icon="changetype"
        @blur="checkpass"
        :rules="[
          { required: true, message: '请填写密码' },
          { validator:validator,message:'请输入6-16位的密码'}
        ]"
      />
       <van-field
        v-model="form.dbpassword"
        :type="type1"
        name="dbpassword"
        label="确认密码"
        placeholder="确认密码"
        :right-icon="type1=='password'?'eye':'eye-o'"
         @click-right-icon="changetype1"
        :rules="[
          { required: true, message: '请填写二次密码' },
          { validator:validator,message:'请输入6-16位的密码'},
          { validator:checkIsSome,message:'2次密码输入不一样'},
        ]"
      />
      <div  style="margin: 0.5rem;">
          <p class="links">
              <router-link class="aitem " :to="{name:'login'}">已有账号,请登录</router-link>
              <router-link class="aitem forget"  :to="{name:'forgetpass'}">忘记密码</router-link>
          </p>
      </div>
      <div style="margin: 0.5rem;">
        <van-button round block type="warning" native-type="submit">注册账号</van-button>
      </div>
    </van-form>
  </div>
</template>


<script>
export default {
  data(){
    return {
      form:{

      },
      type:'password',
      type1:'password'
    }
  },
  methods:{
    checkFail(){
      this.$notify({
        message: '请输入有效的注册信息',
        color: '#ad0000',
        background: '#ffe1e1',
      });
    },
    onSubmit(value){
      // this.$refs.form.validate(valid=>{
      //   console.log(valid)
      // })
      // ajax 注册 
      // json-server 
      this.$ajax.finduser({
        phone:value.phone
      })
      .then(res=>{
        console.log(res)
        if(res.length>0){
          this.$notify({
              message: '用户已经被注册',
              color: '#ad0000',
              background: '#ffe1e1',
          });
        }else{
          this.$ajax.adduser(value)
          .then(res=>{
             this.$notify({
                type: 'success', message: '注册成功' 
              });
              this.$router.push({name:'login',query:{phone:value.phone,from:"register"}})
          })
        }
      })
    },
    validator(val){
      return this.reg.pwd.test(val);
    },
    checkIsSome(val){
      if(this.reg.pwd.test(this.form.password)){
        return this.form.password == val;
      }
    },
    checkpass(){
      if(this.reg.pwd.test(this.form.dbpassword)){
        this.$refs.form.validate("dbpassword")  // 唤起dbpassword 比较密码是否一致 
      }
    },
    changetype(){
      this.type = this.type == 'password'?'text':'password'
    },
    changetype1(){
      this.type1 = this.type1 == 'password'?'text':'password'
    }
  }
}
</script> 



<style lang="scss" scoped>
.links{
  display: flex;
  justify-content: space-between;
}
.aitem{
  text-decoration: none;
  color:brown;
}
.forget{
  color:yellowgreen;
  text-align: right;
}
</style>

  